<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页</title>
		<style>
			nav{
				width: 100%;
				height: 80px;
				background-color: lightblue;
				position: fixed;
				top: 0px;
				left: 0px;
				box-shadow: 0 5px 3px black;
				/*第一种定位logo的方法，利用内边距*/
				/*padding-top: 10px;
				padding-left: 50px;
				box-sizing: border-box;*/
				z-index: 100;
			}
			body{
				margin: 0px;
			}
			nav img{
				width: 200px;
				height: 60px;
				/*第二种定位logo的方法,利用外边距*/
				/*margin-top: 10px;
				margin-left: 50px;*/
				
/*				第三种定位logo的方法,利用绝对定位，绝对定位的时候，只要最近的父元素设置了非静态的属性（static），子元素就可以绝对定位*/
				position: absolute;
				top: 12px;
				left: 55px;
			}
			span{
				float: right;
				/*发生浮动后的元素变成块元素*/
				 line-height: 80px;
			}
			span a{
				color: gray;
				text-decoration: none;
				margin-right: 20px;
				font-size: 20px;
			}
			header{
				margin-top: 80px;
			}
			header img{
				width: 100%;
				height: 450px;
			}
			main{
				width: 80%;
				height: 3000px;
				margin: 0 auto;
				border: 2px solid transparent;
			}
			section img{
				width: 100%;
			}
			section p{
				text-indent: 2em;
			}
			h2{
				color: orange;
				border-left: 4px solid orange;
				padding-left: 15px;
			}
			#sec{
				height: 550px;
				background-image: url("../img/classmates.jpg");
				background-size: 100% 100%;
			}
			#sec div:nth-child(1){
					width: 100px;
					height: 100px;
					background-image: url("../img/lry.jpg");
					background-size: 100% 100%;
					top: 100px;
					left:30px;
			}
			#sec div:nth-child(2){
					width: 150px;
					height: 150px;
					background-image: url("../img/ldh.jpg");
					background-size: 100% 100%;
					top: 20px;
					left:130px;
			}
			#sec div:nth-child(3){
					width: 200px;
					height: 200px;
					background-image: url("../img/wf.png");
					background-size: 100% 100%;
					top: 90px;
					left:150px;
					}
			#sec div{
				border-radius: 50%;
				position: relative;
				border: 1px solid white;		
			}
			footer{
				text-align: center;
				color: red;
			}
			p::before{
				content: "“";
			}
			p::after{
				content: "”";
			}
			a:hover{
				color: green;
			}
		</style>
	</head>
	<body>
		<nav>
			<img src="../img/logo.png" alt="" />
			<span>
				<a href="#">首页</a>
				<a href="#html5">html5</a>
				<a href="#two">我的同学</a>
				<a href="#th">我的家乡</a>
				<a href="">关于</a>
			</span>
		</nav>
		<header>
			<img src="../img/header.jpg" alt="" />
		</header>
		<main>
			<section id="html5">
		    <p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！</p>
		<h2>html5</h2>
		<img src="../img/html5.jpg" alt="" />
		<p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！</p>
			</section>
			<section>
				<h2 id="two">我的同学</h2>
				<div id="sec">
					<div></div>
					<div></div>
					<div></div>
				</div>
				<p>我的同学有王菲、刘若英、刘德华。</p>
			</section>
			<section>
			<h2 id="th">我的家乡</h2>
		<img id="l" src="../img/hometown.JPG" alt="" />
		<p>超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在本教程中，您将学习如何使用 HTML 来创建站点。HTML 很容易学习！相信您能很快学会它！</p>
			</section>
		<hr />
		<footer>
			zhiyou banquan
		</footer>
		</main>
	</body>
</html>
